<template>
    <h2>当前求和为：{{sum}}</h2>
    <button @click="sum++">点我+1</button>
    <hr/>
    <h2>当前的信息为：{{msg}}</h2>
    <button @click="msg+='!'">修改信息</button>
    <hr/>
    <h2>一个人的信息</h2>
    <h3>姓名：{{person.name}}</h3>
    <h3>年龄：{{person.age}}</h3>
    <h3>薪资：{{person.job.j1.salary}}k</h3>
    <button @click="person.name += '~'">修改姓名</button>
    <button @click="person.age++">增加年龄</button>
    <button @click="person.job.j1.salary++">加薪</button>
</template>

<script>
//vue3中watchEffect函数
import { ref, reactive, watch, watchEffect } from 'vue';
export default {
  name: 'Demo', 
  setup() {
    let sum = ref(0)
    let msg = ref('你好啊')
    let person = reactive({
        name: '张三',
        age: 18,
        job: {
            j1: {
                salary: 20, 
            }
        }
    })

    //普通watch函数
    watch(sum, (newValue, oldValue)=>{
        console.log(`sum的值从${oldValue}变成了${newValue}`)
    }, {
        immediate: true
    })

    //watchEffect函数，只需要指定回调函数，不用指定监视的数据
    //1.一上来就执行一次回调
    //2.很智能，回调函数中使用哪个响应式数据，watchEffect就自动监视哪个响应式数据
    watchEffect(()=>{
        //依赖的数据发生变化，回调就执行一次
        const x1 = msg.value
        const x2 = person.job.j1.salary
        console.log('watchEffect回调函数执行了')
    })

    return {
        sum,
        msg,
        person,
    }
  }
}
</script>

<style>
</style>